<!--
 * @Author: your name
 * @Date: 2021-04-01 21:51:19
 * @LastEditTime: 2021-07-17 15:31:22
 * @LastEditors: Please set LastEditors
 * @Description: 临床试验 => 详情
 * @FilePath: /medicine-web/src/views/clinical/detail/index.vue
-->
<template>
  <div class="document-detail-container">
    <p class="document-detail__title font-pattern-5">
      {{artical.title}}
    </p>
    <ul class="document-detail__attribute font-pattern-3" v-if="artical.registration_no">
      <li style="margin-right: 21px;">临床注册号：{{artical.registration_no}}</li>
    </ul>
    <ul class="document-detail__attribute font-pattern-3">
      <li v-if="artical.stage" style="margin-right: 14px;">临床阶段：{{artical.stage}}</li>
      <li v-if="artical.recruit" style="margin-right: 14px;">招募状态：{{artical.recruit}}</li>
      <li v-if="artical.start_time && artical.end_time" style="margin-right: 14px;">研究时间：{{artical.start_time}} ~ {{artical.end_time}}</li>
      <li v-if="artical.organization">开展机构：{{artical.organization}}</li>
      <!-- <li style="margin-right: 14px;">入组人数：{{artical.enrollment_number}}</li>
      <li style="margin-right: 21px;">临床注册号：{{artical.registration_no}}</li> -->
    </ul>
    <p class="document-detail__content font-pattern-11" v-if="artical.virus_type" style="margin-bottom: 13px; margin-top: 13px;">
      溶瘤病毒类型：{{artical.virus_type}}
    </p>
    <p class="document-detail__content font-pattern-11" v-if="artical.tumor_type" style="margin-bottom: 13px;">
      肿瘤类型：{{artical.tumor_type}}
    </p>
    <p class="document-detail__content font-pattern-11" v-if="artical.enrollment_number || artical.enrollment_number == 0" style="margin-bottom: 13px;">
      入组人数：{{artical.enrollment_number}}
    </p>
    <p class="document-detail__content font-pattern-11" v-if="artical.inject_mode" style="margin-bottom: 13px;">
      给药方式：{{artical.inject_mode}}
    </p>
    <p class="document-detail__content font-pattern-11" v-if="artical.cure_method" style="margin-bottom: 32px;">
      联合疗法：{{artical.cure_method}}
    </p>
    <p class="font-pattern-9" v-if="artical.control_group || artical.experimental_group">
      给药方案
    </p>
    <!-- <p class="font-pattern-7" style="margin-top: 55px">
      {{artical.tags}}
    </p> -->
    <p class="font-pattern-3 yahei-font-pattern" style="margin-top: 30px; text-indent: 32px;" v-if="artical.control_group" v-html="artical.control_group">
    </p>
    <p class="font-pattern-3 yahei-font-pattern" style="margin-top: 17px; text-indent: 32px;" v-if="artical.experimental_group" v-html="artical.experimental_group">
    </p>
    <p class="font-pattern-9" style="margin-top: 30px;" v-if="artical.study_endpoint">
      研究终点
    </p>
    <pre class="font-pattern-3 yahei-font-pattern" style="margin-top: 20px;" v-if="artical.study_endpoint" v-html="artical.study_endpoint">
      <!-- {{artical.study_endpoint}} -->
    </pre>
    <p class="font-pattern-3" style="margin-top: 30px;" v-if="artical.source_url"><span class="font-pattern-9">原文地址：</span><a :href="artical.source_url" target="_blank">{{artical.source_url}}</a></p>
    <!-- <div class="document-detail__content font-pattern-3">
      <p style="margin-bottom: 17px;" v-html="artical.content">
      </p>
    </div> -->
    <!-- <a-checkbox-group @change="onChange" style="width: 100%">
      <ul class="download-attachment">
        <li v-for="item in attachmentList" :key="item.id" style="margin-top: 6px;">
          <span class="font-pattern-3">{{ item.fileName }}</span>
          <customBtn class="download" :btnStr="'下载'" @handClick="handleDownloadSingle(item)"></customBtn>
        </li>
      </ul>
    </a-checkbox-group> -->
    <div class="user-options">
      <!-- <customBtn :btnStr="'下载'" @handClick="handleDownload"></customBtn> -->
      <customBtn :btnStr="'收藏'" @handClick="handleCollection"></customBtn>
      <a-popover v-model="showShare" trigger="click">
        <a slot="content" class="share-icon-list">
          <img style="width: 18px; height: 18px; cursor:pointer;" :src="require('@/assets/image/xinlang.png')" alt="" @click.stop="showXinLang(artical)">
          <img style="width: 18px; height: 18px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/qq.png')" alt="" @click.stop="showQQ(artical)">
          <img style="width: 20px; height: 20px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/wechat.png')" alt="" @click.stop="showWechat(artical)">
        </a>
        <customBtn :btnStr="'分享'" @handClick="handleShare"></customBtn>
      </a-popover>
      <div class="wechat-qr-code__container" v-if="showQRCode">
        <div class="wechat-qr-code__title">手机微信扫码分享</div>
        <img class="wechat-qr-code__close" :src="require('@/assets/image/close.png')" alt="" @click.stop="showQRCode = false">
        <div id="wechat-qr-code"></div>
      </div>
      <div class="wechat-qr-code__modal" v-if="showQRCode" @click.stop="showQRCode = false"></div>
    </div>
    
  </div>
</template>
<script>
import customBtn from '@/components/CustomBtn/index.vue'
import share from '@/utils/share'
export default {
  name: 'detail',
  components: { customBtn },
  data () {
    return {
      showShare: false,
      showQRCode: false, // 生成二维码
      artical: {
        title: '', // 标题
        author: '', // 作者
        organization: '', // 开展机构
        recruit: '', // 招募状态
        start_time: '', // 开始时间
        end_time: '', //结束时间
        stage: '', // 临床阶段
        content: '', // 具体内容【富文本】
        source_url: '', // 来源链接地址
        tags: '', // 标签
        control_group: '', // 对照组
        experimental_group: '', // 实验组
        study_endpoint: '', // 研究终点
      },
      attachmentList: [
        { url: '', fileName: '附件1名称名称名称', id: 1 }
      ]
    }
  },
  methods: {
    async handleCollection () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.$route.query.id) {
        const res = await this.$action('doCollection', { user_id: this.getCookie('uid'), ids: this.$route.query.id, module: 1 })
        if (res) {
          this.msgSuccess('收藏成功')
        } else {
          this.msgError('收藏失败')
        }
      }
    },
    handleShare () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      this.showShare = true
    },
    handleShare () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.artical.status != 1) {
        this.msgInfo('此文献尚未启用，无法分享')
        return
      }
      this.showShare = true
    },
    showXinLang (rawData) {
      if (rawData.source_url) {
        share.toShareXinLang(rawData.source_url, rawData.title)
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    showQQ (rawData) {
      if (rawData.source_url) {
        share.toShareQQZone(rawData.source_url, rawData.title, '', '')
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    showWechat (rawData) {
      if (rawData.source_url) {
        this.showQRCode = true
        share.toShareWeChat(rawData.source_url)
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    // onChange (e) {
    //   console.log('onChange', e)
    // },
    handleDownloadSingle (raw) {
      console.log('handleDownloadSingle', raw)
    },
    async fetchData () {
      if (this.$route.query.id) {
        const res = await this.$action('getClinicalDetail', { id: this.$route.query.id })
        console.log('getClinicalDetail', res)
        this.artical.title = res.title ? res.title : ''
        this.artical.author = res.author ? res.author : ''
        this.artical.organization = res.organization ? res.organization : ''
        this.artical.recruit = res.recruit ? res.recruit : ''
        this.artical.start_time = res.start_time ? res.start_time : ''
        this.artical.end_time = res.end_time ? res.end_time : ''
        this.artical.stage = res.stage ? res.stage : ''
        this.artical.content = res.content ? res.content : ''
        this.artical.source_url = res.source_url ? res.source_url : ''
        this.artical.tags = res.tags ? res.tags : ''
        this.artical.control_group = res.control_group ? '对照组: ' + res.control_group : ''
        this.artical.experimental_group = res.experimental_group ? '试验组: ' + res.experimental_group : ''
        this.artical.study_endpoint = res.study_endpoint ? res.study_endpoint : ''
        this.artical.enrollment_number = res.enrollment_number || res.enrollment_number == 0 ? res.enrollment_number : ''
        this.artical.registration_no = res.registration_no ? res.registration_no : ''
        this.artical.virus_type = res.virus_type ? res.virus_type : ''
        this.artical.tumor_type = res.tumor_type ? res.tumor_type : ''
        this.artical.inject_mode = res.inject_mode ? res.inject_mode : ''
        this.artical.cure_method = res.cure_method ? res.cure_method : ''
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
@import '~@/assets/styles/qrcode.scss';
.document-detail-container {
  padding: 60px 0px 200px 0px;
  width: 1120px;
  margin: 0 auto;
  a {
    cursor: pointer;
    color: #1890ff;
  }
  p {
    padding: 0;
    margin: 0;
  }
  .document-detail__title {
    width: 909px;
    margin: 0 auto;
  }
  .document-detail__author {
    text-align: center;
    margin-top: 16px;
  }
  .document-detail__attribute {
    padding: 0;
    margin: 0;
    text-align: center;
    margin-top: 16px;
    @include flex-def;
    @include flex-cCenter;
    @include flex-zCenter;
    flex-wrap: wrap;
  }
  .document-detail__content {
    padding: 0px 0px;
    text-indent: 0px;
  }
  .download-attachment {
    padding: 0;
    margin: 23px 0px 0px 0px;
    width: 100%;
    li {
      width: 100%;
      @include flex-def;
      @include flex-cCenter;
      @include flex-zBetween;
    }
    /deep/ .a-btn-container .btn-pattern {
      width: 102px;
      height: 24px;
      font-size: 14px;
      line-height: 24px;
      color: #fff;
      background-color: #10F1B5;
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.21);
      word-spacing: 0px;
    }
  }
  .user-options {
    /deep/ .a-btn-container {
      display: inline-block;
      margin-right: 17px;
      margin-top: 31px;
    }
    /deep/ .a-btn-container .btn-pattern {
      width: 89px;
      height: 35px;
      font-size: 14px;
      color: #fff;
      background-color: #10F1B5;
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.21);
      word-spacing: 0px;
    }
  }
}
</style>